﻿<template>
    <div class="bg-white" style="position: relative; box-sizing: border-box; padding: 10px 0 10px 0; max-width:850px; margin:0 auto;text-align:center;">
        <slot name="top"></slot>
            <div v-if="showTitle" class="padding-lr-15 flex-row" style="border-bottom:1px solid #F1F1F2;padding-bottom:8px;margin-bottom:8px;justify-content:space-between;">
                <div>
                    <div class="color-000" style="font-size: 20px; margin-bottom: 5px;text-align:left;">{{msg.hdTitle}}</div>
                    <div class="color-999" style="font-size:13px;">
                        <span style="margin-right:10px;">{{msg.oiName}}</span>{{msg.makeTime}}
                    </div>
                </div>
                <input style="display:none;" type="text" id="input" />
                <div v-if="!!preview">
                    <el-button type="primary" size="small" plain v-on:click="copy(msg.hdTitle,msg.miKey)" icon="el-icon-document-copy">文档地址</el-button>
                </div>
            </div>
            <el-empty v-if="msg.mediaList.length==0" :description="emptyText"></el-empty>
            <div class="bg-white padding-lr-15 margin-bottom-8" style="font-size:14px;" v-for="item in msg.mediaList">
                <div class="wrap color-333" v-if="item.miType==1" style="font-size:14px;line-height:22px;white-space:pre-line !important; padding:5px 0;">{{item.miTitle}}</div>
                <el-image v-else-if="item.miType==2" fit="cover" lazy :src="item.miUrl" :preview-src-list="previewList" style="width:auto; height:auto; max-width:100%; margin:0 auto;"></el-image>
                <audio v-else-if="item.miType==3" :src="!!item.rawUrl?item.rawUrl:item.miUrl" preload="metadata" style="width:100%; margin:0 auto; display:block;" controls>您的浏览器不支持音频播放</audio>
                <video v-else-if="item.miType==4" :src="!!item.rawUrl?item.rawUrl:item.miUrl" preload="metadata" style="width:auto; max-width:100%; height:auto; margin:0 auto; display:block;" controls>您的浏览器不支持视频播放</video>
                <div class="wrap" v-else-if="item.miType==5" style="font-size:14px;line-height:22px;white-space:pre-line !important; padding:5px 0;">
                    <el-link type="primary"  v-on:click="open(item.miUrl)">{{item.miTitle}}</el-link>
                </div>
                <template v-else-if="item.miType==7">
                    <a class="flex-row padding-4 wrap" style="background-color:#F1F1F2;border-radius:5px; color:#333; text-decoration:none;" target="_blank" :href="item.miUrl">
                        <div style="padding:0 8px 0 4px;">
                            <i :class="[getFileIco(item.miTitle)]" style="font-size:2.2em !important;color:#00ffff;"></i>
                        </div>
                        <div class="flex-row-fill" style="line-height:20px !important;">
                            <div class="text-left">{{item.miTitle}}</div>
                            <div class="color-888 text-left">{{item.miSize}}</div>
                        </div>
                    </a>
                </template>
            </div>
        <slot></slot>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            props: {
                value: {
                    type: Object,
                    default: {}
                },
                preview: {
                    type: Boolean,
                    default: true
                },
                apiUrl: {
                    type: String,
                    default: ""
                },
                showTitle: {
                    type: Boolean,
                    default: true
                },
                emptyText: {
                    type: String,
                    default: "未添加通知内容"
                },
            },
            data: function () {
                return {

                };
            },
            computed: {
                msg: {
                    get: function () {
                        var v = this.value;
                        if (!hxt.isArray(v.mediaList)) this.$set(v, 'mediaList', []);
                        return v;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                },
                previewList: function () {
                    var list = [];
                    if (this.msg && this.msg.mediaList.length > 0) {
                        var obj = this.msg.mediaList.filter(function (item) { return item.miType == 2 });
                        list = obj.map(function (item) { return item.miUrl });
                    };
                    //console.log(list)
                    return list;
                }
            },
            methods: {
                getFileIco: function (name) {
                    return hxt.getFileIco(name);
                },
                open: function (url) {
                    window.open(url);
                },
                copy: function (label, hdCid) {
                    //console.log(hxt.config.link + 'pc/helperShare/' + hdCid);
                    window.open(hxt.config.link + 'pc/helperShare/' + hdCid);
                    return;
                    const dom = document.createElement("input");
                    dom.value = hxt.config.link + 'pc/helperShare/' + hdCid;
                    document.body.appendChild(dom);
                    dom.select();
                    document.execCommand("copy");
                    document.body.removeChild(dom);
                    try {
                        if (document.execCommand('copy', false, null)) {
                            hxt.success('【' + label + '】文档地址复制成功：' + dom.value);
                        } else {
                            hxt.error('【' + label + '】文档地址复制失败');
                        };
                    } catch (err) {
                        hxt.error('【' + label + '】文档地址复制失败：' + err);
                    };
                }
            },
            components: {
                /*vueSign: function () { return hxt.getComponent({ url: hxt.config.link + 'web/vueComponent', name: 'classNotify/vueSign' }); }*/
            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>